<template>

	<view style="position: relative;width: 100vw;top: 0;" @mousemove.stop="changeTab(-1)">
		<view style="color: white;text-align: center;font-weight: 550;font-size: 30px;margin: 10rpx;">
			{{title}}
		</view>
		<view class="wrap-x justify-center" @mousemove.stop="changeTab(-1)" style="">
			<view class="wrap-x  align-center">
				<view class="pstc-title wrap-x justify-center">
					<view class=" wrap-x justify-center">
						<view v-for="(item, index1) in type_list" style="padding:10rpx 80rpx;">
							<navigator :class="[index1 == index ? 'active' : 'no']" @mousemove.stop="changeTab(index1)"
								:url="item.url"
								style="font-size: 28rpx;padding:10rpx 40rpx;border-radius: 8rpx;border: 1rpx solid #eee;">
								{{ item.name }}
							</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Header',
		props: {
			index: {
				default: 0
			},
			title: {
				default: '可视化布局实验场'
			}
		},
		data() {
			return {
				curSecTab: -1,
				curTab: -1,

				type_list: [{
						name: '盒模型',
						id: 2,
						url: '../index/index',
						list: []
					},
					{
						name: '定位布局',
						id: 6,
						url: '../project/project'
					},
					{
						name: '浮动布局',
						id: 4,
						url: '../project/project2'
					},
					{
						name: '弹性布局',
						id: 5,
						url: '../project/project3'
					},
					{
						name: '动画效果',
						id: 5,
						url: '../project/project4'
					},
					{
						name: '实战演练',
						id: 5,
						url: '../project/project5'
					}
				]
			};
		},
		methods: {
			changeTab(index) {
				this.curTab = index;
				this.curSecTab = -1;
			},
			changeSecTab(index, index1) {
				this.curTab = index;
				this.curSecTab = index1;
			},
			goTo(item) {
				if (item.url) {
					uni.redirectTo({
						url: item.url,
						fail(res) {
							console.error(res);
						}
					});
				}
			}
		}
	};
</script>

<style lang="scss">
	.logo {
		height: 150rpx;
		width: 150rpx;
		border-radius: 750rpx;
	}

	.line {
		width: 4rpx;
		height: 100rpx;
		background-color: #666;
	}

	.text-red {
		color: #fc492b;
	}

	.bg-red {
		background-color: #fc492b;
	}

	.pstc-title {
		color: #2f2f2f;

		.active {
			background: #da251d;
			color: #fff;
		}
		.no{
			  background: rgba(238, 180, 188, 0.5);
		}
	}
</style>